<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>英语视频</title>
    <link
      href="/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
    />
  </head>
  <body class="p-4">
    <ul id="sources" class="nav nav-pills" role="tablist"></ul>

    <br />

    <ul id="categories" class="nav nav-pills" role="tablist"></ul>

    <br />

    <div
      id="videos"
      class="row row-cols-6 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 row-cols-xxl-6 g-4"
    ></div>

    <script
      src="/bootstrap.bundle.min.js"
      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    ></script>

    <script>
      const invoke = window.__TAURI__.core.invoke;

      function createElement(tag, attrs, ...children) {
        let ele = document.createElement(tag);
        for (const key in attrs) {
          if (attrs[key] !== false && !(typeof attrs[key] === "function"))
            ele.setAttribute(key, attrs[key]);

          if (typeof attrs[key] === "function")
            ele.addEventListener(key, attrs[key]);
        }
        ele.append(...children);
        return ele;
      }

      function open_video(event, source, category, video) {
        if (event.srcElement.tagName !== "A") {
          invoke("plugin:shell|execute", {
            program: "vlc",
            args: [
              "-f",
              "--no-video-title-show",
              "--input-title-format=CGTN",
              video.src,
            ],
            options: {},
          });
          invoke("save_history", { video });
          if (source == "history" && category == "history") {
            get_videos(source, category);
          }
        }
      }

      function get_videos(source, category) {
        document.getElementById("videos").innerHTML = "";
        document
          .getElementById("videos")
          .append(
            createElement(
              "div",
              { class: "spinner-border m-5", role: "status" },
              createElement("span", { class: "visually-hidden" }, "加载中……")
            )
          );
        invoke("get_videos", { source, category }).then((data) => {
          const videos = data.items;
          document.getElementById("videos").innerHTML = "";
          if (videos.length === 0) {
            document.getElementById("videos").appendChild(
              createElement(
                "div",
                {
                  class: "card",
                  click: (event) => open_video(event, source, category, video),
                },
                createElement("div", { class: "card-body" }, "无视频")
              )
            );
          }
          for (const video of videos) {
            document.getElementById("videos").appendChild(
              createElement(
                "div",
                { class: "col" },
                createElement(
                  "div",
                  {
                    class: "card h-100",
                    click: (event) =>
                      open_video(event, source, category, video),
                  },
                  createElement("img", {
                    class: "card-img-top",
                    src: video.poster,
                    alt: video.title,
                    loading: "lazy",
                    style: "object-fit: scale-down;",
                  }),
                  createElement(
                    "div",
                    { class: "card-body" },
                    createElement("h5", { class: "card-title" }, video.title),
                    createElement(
                      "p",
                      { class: "card-text" },
                      video.description
                    ),
                    createElement(
                      "a",
                      { class: "card-link", href: video.url, target: "_blank" },
                      "详情"
                    )
                  )
                )
              )
            );
          }
        });
      }

      function get_categories(source) {
        document.getElementById("categories").innerHTML = "";
        invoke("get_categories", { source }).then((data) => {
          const categories = data.items;
          for (const category of categories) {
            document.getElementById("categories").appendChild(
              createElement(
                "li",
                {
                  class: "nav-item",
                  role: "presentation",
                },
                createElement(
                  "button",
                  {
                    class: "nav-link" + (category.default ? " active" : ""),
                    type: "button",
                    "data-bs-toggle": "tab",
                    role: "tab",
                    click: () => {
                      get_videos(source, category.id);
                    },
                  },
                  category.name
                )
              )
            );
          }
          get_videos(
            source,
            categories.filter((source) => source.default)[0].id
          );
        });
      }

      document.addEventListener("DOMContentLoaded", function get_sources() {
        invoke("get_sources").then((data) => {
          const sources = data.items;
          for (const source of sources) {
            document.getElementById("sources").appendChild(
              createElement(
                "li",
                {
                  class: "nav-item",
                  role: "presentation",
                },
                createElement(
                  "button",
                  {
                    class: "nav-link" + (source.default ? " active" : ""),
                    type: "button",
                    "data-bs-toggle": "tab",
                    role: "tab",
                    click: () => {
                      get_categories(source.id);
                    },
                  },
                  source.name
                )
              )
            );
          }
          get_categories(sources.filter((source) => source.default)[0].id);
        });
      });
    </script>
  </body>
</html>
